<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
    </style>

    <script>

        // 使用函数将代码封装,使得复用性更高
		
		// 使用函数封装带来的问题:
		// 1.全局变量污染
		// 2.代码结构不够清晰,维护不方便
		
		window.onload = function(){
			var divs = tag("div");
			setStyle(divs);
			
			var ps = tag("p");
			setStyle(ps);
		}
		
		function tag(tagName) {
			return document.getElementsByTagName(tagName);
		}
		function setStyle(elements){
			for(var j = 0; j < elements.length; j++) {
				var ele = elements[j];
				ele.style.border = "1px solid red";
			}
		}
		
    </script>
</head>
<body>
<div></div>
<div></div>
<div></div>

<p>我是第1个p元素</p>
<p>我是第2个p元素</p>
<p>我是第3个p元素</p>
</body>
</html>